<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="/js/spritejs.js"></script>
</head>
<body>
<div id="app" style="height:500px;"></div>
  <script>
    const shape = 'm301.855,200.202c-3.674,-1.385 -7.452,-1.966 -11.146,-1.794c0.659,-2.922 0.844,-5.85 0.58,-8.719c-0.937,-10.407 -7.663,-19.864 -18.063,-23.834c-10.697,-4.043 -22.298,-1.168 -29.902,6.403c3.015,0.026 6.074,0.594 9.035,1.728c13.626,5.151 20.465,20.379 15.32,34.004c-1.905,5.02 -5.177,9.115 -9.22,12.05c-6.951,4.992 -16.19,6.536 -24.777,3.271c-13.625,-5.137 -20.471,-20.371 -15.32,-34.004c0.673,-1.768 1.523,-3.423 2.526,-4.992l-0.014,0c0,0 0,0 0,0.014c4.386,-6.853 8.145,-14.279 11.146,-22.187c23.294,-61.505 -7.689,-130.278 -69.215,-153.579c-61.532,-23.293 -130.279,7.69 -153.579,69.202c-6.371,16.785 -8.679,34.097 -7.426,50.901c0.026,0.554 0.079,1.121 0.132,1.688c4.973,57.107 41.767,109.148 98.945,130.793c58.162,22.008 121.303,6.529 162.839,-34.465c7.103,-6.893 17.826,-9.444 27.679,-5.719c11.858,4.491 18.565,16.6 16.719,28.643c4.438,-3.126 8.033,-7.564 10.117,-13.045c5.52,-14.569 -1.82,-30.852 -16.376,-36.359z';

    const {Scene, Polyline} = spritejs;
    const container = document.querySelector('#app');
    const scene = new Scene({
      container,
      displayRatio: window.devicePixelRatio,
      contextType: '2d',
    });
    const layer = scene.layer('hahaha');
    const line = new Polyline();
    line.attr({points: [[10, 10, 400, 400]], strokeColor: '#f00', lineWidth: 40});
    line.attr({clipPath: shape});
    layer.append(line);
  </script>
</body>
</html>